<template>
	<view>
		<uni-popup  ref="popup" type="bottom" border-radius="20rpx 20rpx 0 0" background-color="#fff"
			:is-mask-click="false">
			<view class="popup-content">
				<view class="name_box">
					<view class="title zl-width-100 zl-flex zl-row-center">
						<text class="zl-font-36 zl-font-bold" style="color: #131415;">{{title}}</text>
					</view>
					<view class="name_line"></view>
				</view>

				<view class="xieyi-body">
					<view class="des" @click="OpenPrivacyContract()">
						感谢您使用本应用，您使用应用前应当阅读并同意
						<text
							style="color: #1e63fe;">{{title}}</text>。当您点击同意并开始使用产品服务时，即表示你已理解并同意该条款内容，该条款将对您产生法律约束力。如您拒绝，将无法进入应用。
					</view>
				</view>
				<view class="zl-flex btn-box">
					<button type="default" class="btn" @click="refuse()">不同意</button>
					<button type="primary" open-type="agreePrivacyAuthorization" class="btn"
						@agreeprivacyauthorization="handleAgree()">同意并继续</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "PrivacyPoup",
		data() {
			return {
				title: ''
			};
		},
		props: {


		},
		mounted() {
			if (wx.getPrivacySetting) {
				wx.getPrivacySetting({
					success: res => {
						console.log(res);
						if (res.needAuthorization) {
							// 需要弹出隐私协议
							this.$refs.popup.open()
							this.title = res.privacyContractName

						} else {
							// 用户已经同意过隐私协议，所以不需要再弹出隐私协议，也能调用已声明过的隐私接口

						}
					},
					fail: () => {},
					complete: () => {}
				})
			}

		},

		methods: {
			refuse() {
				uni.exitMiniProgram({
					success: function() {
						console.log('退出小程序成功');
					},
					fail: function(err) {
						console.log('退出小程序失败', err);
					},
				})

				console.log("退出小程序");
			},
			handleAgree() {
				this.$refs.popup.close()
			},
			OpenPrivacyContract() {
				wx.openPrivacyContract({
					success: () => {},
					fail: () => {},
					complete: () => {}
				})
			}
		}
	}
</script>

<style lang="scss">
	.popup-content {
		padding: 0 0 40rpx 0;
	}

	.name_box {
		width: 690rpx;
		margin: 0 auto;

		.title {
			height: 120rpx;

			image {
				width: 30rpx;
				height: 30rpx;
			}
		}

		.name_line {
			width: 750rpx;
			height: 1px;
			background-color: #F4F4F4;
			position: absolute;
			left: 0;
		}


	}

	.xieyi-body {
		padding: 50rpx 60rpx;

		.des {
			color: #999;
			font-size: 30rpx;
			line-height: 40rpx;

		}
	}

	.btn-box {
		margin-top: 20rpx;
		padding: 0 30rpx;

		.btn {
			width: 320rpx;
			font-size: 32rpx;
		}
	}
</style>